<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--第一种: 遍历数组 -->
        <ul>
            <li v-for="item in nameArr">{{item.name}}</li>
        </ul>
        <!-- 第二种情况 遍历的时候需要设置唯一的索引 key属性 
            key属性的作用: 指定当前的标签的唯一索引,当数据发生改变时,在进行新旧虚拟dom 比较时候,
            key属性作为新旧虚拟dom 比较的依据,提高比较的效率
        -->
        <ul>
            <li v-for="(v,i) in nameArr" :key="v.id">{{i}}--{{v.name}}</li>
        </ul>

        <!--第三种: 遍历对象  -->
        <ul>
            <li v-for="(val,key,index) in userinfo">{{index}}--{{key}}--{{val}}</li>
        </ul>
        <!-- 第四种: 遍历字符串 -->
        <p>
            <span v-for="(item,index) in str" :key="index" :class="index%2==0?'red':'green'">{{item}}</span>
        </p>
        <p>
            <span v-for="(item,index) in str" :key="index" :style="{color:index%2==0?'red':'green'}">{{item}}</span>
        </p>
        <!-- 第五种: 遍历数字 -->
        <ul>
            <li v-for="item in 10">{{item}}</li>
        </ul>
        <!-- 第六种 -->
        <!-- 循环的嵌套 -->
        <ul>
            <li v-for="(item,index) in qianfengArr" :key="item.id">
                <div>
                    <p>{{item.major}}</p>
                    <p>
                        <span v-for="child in item.children" :key="child.id">{{child.classname}}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>
<script>
    // v-for指令一般用于遍历数据用的
    // 使用最频繁
    const app = Vue.createApp({
        data() {
            return {
                nameArr: [{
                    id: 1,
                    name: "及时雨-宋江"
                }, {
                    id: 2,
                    name: "玉麒麟-卢俊义"

                }, {
                    id: 3,
                    name: '智多星-吴用'

                }],
                userinfo: {
                    username: "小甜甜",
                    age: 18,
                    sex: "女"
                },
                str: '曾经有一份真挚的爱情摆在我的面前,我没有珍惜!!',
                qianfengArr: [
                    {
                        id: 1,
                        major: "H5",
                        children: [
                            {
                                id: 1,
                                classname: "2210班级"
                            },
                            {
                                id: 2,
                                classname: "2211班级"
                            },
                            {
                                id: 3,
                                classname: "2212班级"
                            }
                        ]
                    },
                    {
                        id: 2,
                        major: "java",
                        children: [
                            {
                                id: 1,
                                classname: "2100班级"
                            },
                            {
                                id: 2,
                                classname: "2101班级"
                            },
                            {
                                id: 3,
                                classname: "2102班级"
                            }
                        ]
                    }

                ]

            }
        },
        methods: {

        }
    }).mount('#app')

</script>